<template>
	<view class="repair-wrap">
		<view class="" style="padding-bottom: 184rpx; box-sizing: border-box;">
			<view class="" style="position: fixed; width: 100%;z-index: 20;">
				<view class="tab_nav" style="background-color: #FFFFFF;">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view :class="{'active':isActive === index}" @click="checked(index)"
							style="position: relative;">
							{{item.title}}
						</view>

					</view>
				</view>
				<view class="header-form" v-if="isActive ==0">
					<view class="header-li">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<view >
							<view  class="select-cont" @click="showTime1 = true" >
								{{ typaBtneVal }}
								<u-icon name="arrow-down"  style="color:#aaaaaa;margin-left: 10rpx;"></u-icon>
							</view>
							<u-select v-model="showTime1"  mode="single-column"  @confirm="typeBtn" :list="typaBtne"></u-select>
						</view>
					</view>
				</view>
				<view class="header-form" v-if="isActive ==1">
					<view class="header-li">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<view >
							<view  class="select-cont" @click="showTime2 = true" >
								{{ typaBtneVal1 }}
								<u-icon name="arrow-down"  style="color:#aaaaaa;margin-left: 10rpx;"></u-icon>
							</view>
							<u-select v-model="showTime2"  mode="single-column"  @confirm="typeBtn" :list="typaBtneTowBtn"></u-select>
						</view>
					</view>
				</view>
				<view class="header-form" v-if="isActive ==2">
					<view class="header-li">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<view >
							<view class="select-cont" @click="showTime3 = true">
								{{ typaBtneVal2 }}
								<u-icon name="arrow-down"  style="color:#aaaaaa;margin-left: 10rpx;"></u-icon>
							</view>
							<u-select v-model="showTime3"  mode="single-column"  @confirm="typeBtn" :list="typaBtneThreeBtn"></u-select>
						</view>
					</view>
				</view>
				<view class="header-form" v-if="isActive ==3">
					<view class="header-li">
						<view class="header-name">
							<h4>选择时间：</h4>
						</view>
						<view >
							<view  class="select-cont" @click="showTime1 = true" >
								{{ typaBtneVal3 }}
								<u-icon name="arrow-down"  style="color:#aaaaaa;margin-left: 10rpx;"></u-icon>
							</view>
							<u-select v-model="showTime1"  mode="single-column"  @confirm="typeBtn" :list="typaBtneFourBtn"></u-select>
						</view>
					</view>
				</view>
			</view>
		</view>

		<viewData ref="vt" :type="'noData'" :nextPage="nextPage" :isTab="false" :isData="classList.length < 1"
			:loading="loadingS" @onRefresh="onRefresh" :backtop="backtop" :noDatatext="noDatatext">
			<view v-if="classList.length == 0">
				<view style="width: 232px;height: 242px;margin: 110px auto;">
					<image style="width: 100%;height: 100%;"
						src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode=""></image>
				</view>
			</view>
			<view v-for="(item,index) in classList" class="pl-2 pr-2">
				<view class="">
				</view>
				<view class="u-m-t-10 repair-box shadow"
					style="align-items: center;;padding: 15px;display: flex; border-radius: 10px;"
					@click="detail(item.id)">
					<view style="width:200rpx;height:89px" v-if="item.images">
						<image style="width:110%;height:100%;border-radius: 10px;" :src="item.images" mode="aspectFill">
						</image>
					</view>
					<view style="width:200rpx;height:89px" v-else>
						<image style="width:110%;height:100%;border-radius: 10px;" :src="item.work_image"
							mode="aspectFill">
						</image>
					</view>
					<view style="margin-left:20px;display: flex;flex-direction:column;justify-content:space-between">
						<view>
							<view class="flex justify-between">
								<view class="repair-titel">
									<view
										style="position:relative; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;padding-right: 20rpx;">
										<!-- <h3>{{item.work_name}}</h3> -->
										<text class="title-h3" style="">{{item.work_name}}
										</text>
										<!--  -->
										<view class="" v-if="item.work_red_dot==1&&isActive==0" style="position: absolute;top: 2rpx;right: 2rpx; width: 16rpx; height: 16rpx;border-radius: 8rpx;
										background-color: red;">
											<!-- <view class="" style="position: absolute;top: 2rpx;right: 2rpx; width: 16rpx; height: 16rpx;border-radius: 8rpx;
										background-color: red;"> -->
										</view>
									</view>
								</view>
								<view>
									<view class="notice-typeOrgin" v-if="item.work_type == 1">
										工作安排
									</view>
									<view class="notice-typeBlue" v-if="item.work_type == 2">
										循环计划
									</view>
									<view class="notice-typePuTong" v-if="item.work_type == 3">
										工作记录
									</view>
									<view class="notice-typeOrgin" v-if="item.work_type == 4">
										公区报事报修
									</view>
								</view>
							</view>
							<view class="ellipsis-2" style="color: #999999;margin-top: 5px;font-size: 14px;">
								<span style="color:#333">
									{{item.work_content!=null&&item.work_content!=''?item.work_content.substring(0,13)+'...':'暂无'}}
								</span>
							</view>
						</view>
						<view class="">
							<view style="display: flex;color: #999999;margin-top: 10rpx;">
								<view>工作人员：</view>
								<view style="color:#333">{{item.work_complete_person_name}}</view>
							</view>
							<view style="width:420rpx;display:flex;color: #999999;margin-top: 10rpx;">
								<span>公示时间：</span>
								<span style="color:#333">{{item.work_complete_time}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</viewData>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairList: [],
				homelist: {},
				pagedIndex: 1,
				classList: [],
				pageIndex: 1,
				loading: false,
				loadingS: false,
				// type: 1,
				nextPage: true,
				listData: [],
				buttonClick: 1,
				filterData: [
					[{
						text: '今日',
						value: 0
					}, {
						text: '一天前',
						value: 1
					}, {
						text: '两天前',
						value: 2
					}, {
						text: '三天前',
						value: 3
					}]
				],
				defaultIndex: [0],
				ruleForm: {
					num: 1,
				},
				showTime1:false,
				showTime2:false,
				showTime3:false,
				showTimeVal:'',
				showTimeVal1:'',
				typaBtneVal:'今日',
				typaBtneVal1:'本周',
				typaBtneVal2:'本月',
				typaBtneVal3:'今年',
				typaBtne: [
					{	value: '1', label: '今日'},
					{	value: '2',	label: '一天前' },
					{	value: '3',	label: '两天前'},
					{	value: '4',	label: '三天前' }
				],
				typaBtneTowBtn: [
					{	value: '1',	label: '本周'},
					{ value: '2',	label: '上周'},
					{	value: '3',	label: '大上周'	}
				],
				typaBtneThreeBtn: [
					{	value: '1',	label: '本月'},
					{	value: '2',	label: '上月'	},
					{	value: '3',	label: '大上月'}
				],
				typaBtneFourBtn: [
					{	value: '1',	label: '今年'},
					{ value: '2',	label: '去年'	},
					{	value: '3',label: '前年'	}
				],
				isActive: 0,
				inday: 0,
				navList: [{
						index: 0,
						title: '日公示'
					}, {
						index: 1,
						title: "周公示"
					}, {
						index: 2,
						title: "月公示"
					},
					{
						index: 3,
						title: "年公示"
					}
				],
				backtop: false,
				//无数据默认提示文字
				noDatatext: '暂无日展示数据',
				//提示文字1
				noDatahint0: '暂无日展示数据',
				noDatahint1: '暂无周展示数据',
				noDatahint2: '暂无月展示数据',
				noDatahint3: '暂无年展示数据',
			}
		},
		onShow() {
			uni.setStorageSync('announcement', false)
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						this.$openInvite()
					} else {
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.getRepaireClass()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			// this.getRepaireClass()
		},
		onPullDownRefresh() {
			this.checkLogin();
		},
		methods: {
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							_this.getRepaireClass()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
			},
			//获取日展示
			typeBtn: function(e) {
				console.log(e,'---选择的值')
				this.pageIndex = 1
				this.showTime1 = false;
				this.showTime2 = false;
				this.showTime3 = false;
				this.ruleForm.num = e[0].value
				if(this.isActive == 0){
					this.typaBtneVal = e[0].label
				}
				if(this.isActive == 1){
					this.typaBtneVal1 = e[0].label
				}
				if(this.isActive == 2){
					this.typaBtneVal2 = e[0].label
				}
				console.log(this.isActive)
				if(this.isActive == 3){
					console.log(e[0].label,e[0])
					this.typaBtneVal3 = e[0].label
					
				}
				this.getRepaireClass()
			},
			//跳转详情页面
			detail(id) {
				uni.navigateTo({
					url: '/homePage/publicity/detailspublicity?id=' + id
				})
			},
			checked(index) {
				this.nextPage = true
				if (index == 0) {
					this.typaBtneVal = '今日'
					this.noDatatext = this.noDatahint0
				} else if (index == 1) {
					this.typaBtneVal1 = '本周'
					this.noDatatext = this.noDatahint1
				} else if (index == 2) {
					this.typaBtneVal2 = '本月'
					this.noDatatext = this.noDatahint2
				} else if (index == 3) {
					this.typaBtneVal3 = '今年'
					this.noDatatext = this.noDatahint3
				}
				this.backtop = !this.backtop
				this.pageIndex = 1
				this.isActive = index
				this.ruleForm.num = 1
				this.classList = []
				this.getRepaireClass();
			},
			//下拉刷新
			onRefresh() {
				if (this.nextPage) {
					this.pageIndex = this.pageIndex + 1;
					this.getRepaireClass();
				}
			},
			// 获取工作公示列表
			getRepaireClass() {
				uni.showLoading({
					title: '加载中'
				});
				this.loading = false;
				let params = {
					work_category: this.isActive + 1,
					pageIndex: this.pageIndex,
					different: 1, //app标识
					num: this.ruleForm.num, //业主端时间(0当天时间 1 前一天 2前两天  3前三天 )默认是0
					room_id: this.homelist.roomId, //房间号
				};
				this.$request.api.workPublicity(params).then(res => {
					if (res.data.data.datalist.length < 10) {
						this.nextPage = false
					}
					if (this.pageIndex == 1) {
						this.classList = res.data.data.datalist || [];
						this.$request.api.delRedDots(params).then(res => {
						})
					} else {
						this.classList = [...this.classList, ...res.data.data.datalist];
					}
					if (this.classList.length > 0) {
						this.loadingS = true;
					}
					if (this.nextPage) {
						this.loading = true;
					} else {
						this.loading = false;
					}
					uni.hideLoading();
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: err.errorMessage,
						duration: 2000,
						icon: 'none'
					});
					return;
				})
				uni.stopPullDownRefresh()
			},
			//点击物业费今日、本月、今年
			handlerClickState(state) {
				switch (state) {
					case 1: {
						this.buttonClick = 1;
						this.getRepaireClass();
						break;
					}
					case 2: {
						this.buttonClick = 2;
						this.getRepaireClass();
						break;
					}
					case 3: {
						this.buttonClick = 3;
						this.getRepaireClass();
						break;
					}
					case 4: {
						this.buttonClick = 4;
						this.getRepaireClass();
						break;
					}
				}
			},
			//筛选
			ed(res) {
				switch (res[0][0].value) {
					case 0:
						this.release = null;
						this.effective = null;
						this.invalid = null;
						this.cancel = null;
						this.pageIndex = 1;
						this.getRepaireClass();
						break;
					case 1:
						this.release = 1;
						this.effective = null;
						this.invalid = null;
						this.cancel = null;
						this.pageIndex = 1;
						this.getRepaireClass();
						break;
					case 2:
						this.release = null;
						this.effective = 1;
						this.invalid = null;
						this.cancel = null;
						this.pageIndex = 1;
						this.getRepaireClass();
						break;
					case 3:
						this.release = null;
						this.effective = null;
						this.invalid = 1;
						this.cancel = null;
						this.pageIndex = 1;
						this.getRepaireClass();
						break;
					default:
						break;
				}
			},
			// 图片预览
			preview(item) {
				uni.previewImage({
					urls: [item],
					current: 0,
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
						}
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	// /deep/.noData>uni-scroll-view {
	// 	height: 100% !important;
	// }

	.isPageText {
		text-align: center;
	}

	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;
				max-width: 240rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}

		.button {
			width: 21%;
			border-radius: 33px;
			line-height: 26px;
			border: 1px solid #CCCCCC;
			font-size: 14px;
		}
		.header-form {
			background: #FFFFFF;
			.header-li {
				padding: 0 55rpx;
				display: flex;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 95rpx;
				color: #333333;
				border-bottom: 1rpx solid #EEEEEE;
				justify-content: space-between;
				.select-cont{
					display: flex;
				}
				.header-name {
					width: 140rpx;
				}

				.text-area {
					width: 420rpx;
					padding-top: 26rpx;
					height: 60rpx;
				}
			}
		}

		.tab_nav {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.tab_nav .navTitle {
			position: relative;
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi;
			color: #333;
		}

		.active {
			position: relative;
			color: #427705;
		}

		.active::after {
			content: "";
			position: absolute;
			width: 100rpx;
			height: 4rpx;
			background-color: #427705;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}

		.arrment_btn {
			width: 180rpx;
			height: 38rpx;
			line-height: 38rpx;
			text-align: center;
			color: #FFFFFF;
			background: #427705;
			border-radius: 6rpx;
			margin-left: 20rpx;
			font-size: 22rpx;
		}
	}

	.notice-type {
		// width: 80rpx;
		// height: 40rpx;
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		// line-height: 40rpx;
		padding: 10rpx 10rpx
	}

	.notice-typePuTong {
		// width: 80rpx;
		// height: 40rpx;
		background: linear-gradient(90deg, #00aa00 0%, #55aa00 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		// line-height: 40rpx;
		padding: 10rpx 10rpx
	}

	.notice-typeBlue {
		background: linear-gradient(90deg, #007aff 0%, #007affd1 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		// line-height: 40rpx;
		padding: 10rpx 10rpx
	}

	.notice-typeOrgin {
		background: linear-gradient(90deg, #FFAA33 0%, #FFBB66 100%);
		border-radius: 14rpx 0;
		text-align: center;
		color: #fff;
		padding: 10rpx 10rpx
	}

	.form-select {
		width: 120rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/mailXiaLa2.png) no-repeat center right;
		background-size: 22rpx 22rpx;
	}

	.title-h3 {
		position: relative;
		font-size: 32rpx;
		font-weight: 700;
	}
</style>